在我们做应用系统的时候，往往都会涉及图表的展示，综合的图表展示能够给客户带来视觉的享受和数据直观体验，同时也是增强客户认同感的举措之一。基于图表的处理，我们一般往往都是利用对应第三方的图表组件，然后在这个基础上为它的数据模型提供符合要求的图表数据即可，VUE+Element 前端应用也不例外，我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装。
1、图表组件的安装使用首先使用npm 安装vue-echarts组件。
git地址：https://github.com/ecomfe/vue-echarts
NPM安装命令
npm install echarts vue-echarts然后在对应模块页面里面引入对应的组件对象，如下代码所示。
import ECharts from 'vue-echarts' // 主图表对象import 'echarts/lib/chart/line' // 曲线图表import 'echarts/lib/chart/bar' // 柱状图import 'echarts/lib/chart/pie' // 饼状图import 'echarts/lib/component/tooltip' // 提示信息接着在Vue组件里面对象中加入对象即可。
export default { components: {'v-chart': ECharts },如果是全局注册使用，那么可以在main.js里面进行加载
// 注册组件后即可使用Vue.component('v-chart', VueECharts)我们来看看图表展示的效果图
柱状图效果
饼状图
曲线图
其他类型，极坐标和散点图形
或者曲线和柱状图组合的图形
